import React from "react";
import styles from "./drawMenu.module.css";
import { CSSTransition } from "react-transition-group";

class DrawMenu extends React.Component {
  state = {
    isOpen: false,
  };
  static getDerivedStateFromProps(nextProps, preState) {
    if (typeof nextProps.isOpen === "boolean") {
      return {
        isOpen: nextProps.isOpen,
      };
    }
    return null;
  }
  render() {
    const { handleCloseRightMenu, style } = this.props;
    const { isOpen } = this.state;
    return (
      <CSSTransition
        timeout={300}
        classNames="slide"
        in={isOpen}
        unmountOnExit={true}
        appear
        onEnter={() => console.log("进入动画执行之前")}
      >
        <div className={styles["draw-menu"]} style={style}>
          <span className={styles["close"]} onClick={handleCloseRightMenu}>
            X
          </span>
          {this.props.title}
          {this.props.children}
        </div>
      </CSSTransition>
    );
  }
}
export default DrawMenu;
